<template>
  <div 
    class="creator-card" 
    :class="{ 
      'creator-card--mobile': mobile,
      'creator-card--recommended': creator.is_recommend === 1,
      'creator-card--inactive': creator.status !== 1
    }"
    @click="handleClick"
  >
    <!-- 推荐标识 -->
    <div v-if="creator.is_recommend === 1" class="creator-card__recommend-badge">
      <n-icon :size="14">
        <StarOutline />
      </n-icon>
      <span>推荐</span>
    </div>

    <!-- 头像区域 -->
    <div class="creator-card__avatar">
      <n-avatar
        :size="mobile ? 60 : 80"
        round
        color="transparent"
      >
        <img
          :src="creator.avatar"
          :alt="creator.nickname"
          class="creator-card__avatar-img"
          @error="handleAvatarError"
          @load="handleAvatarLoad"
        />
        <template #fallback>
          <div class="creator-card__avatar-fallback">
            {{ creator.nickname.charAt(0) }}
          </div>
        </template>
      </n-avatar>
      
      <!-- 状态指示器 -->
      <div 
        class="creator-card__status-indicator"
        :class="`creator-card__status-indicator--${getStatusClass(creator.status)}`"
        :title="getStatusText(creator.status)"
      ></div>
    </div>

    <!-- 内容区域 -->
    <div class="creator-card__content">
      <!-- 昵称和类型 -->
      <div class="creator-card__header">
        <h3 class="creator-card__nickname" :title="creator.nickname">
          {{ creator.nickname }}
        </h3>
        <n-tag
          :type="getCreatorTypeTagType(creator.creator_type)"
          size="small"
          round
        >
          {{ getCreatorTypeText(creator.creator_type) }}
        </n-tag>
      </div>

      <!-- 分类 -->
      <div class="creator-card__category">
        <n-icon :size="14" class="creator-card__category-icon">
          <FolderOutline />
        </n-icon>
        <span>{{ creator.category || '未分类' }}</span>
      </div>

      <!-- 描述 -->
      <div class="creator-card__description" :title="creator.description">
        {{ creator.description || '暂无描述' }}
      </div>

      <!-- 统计信息 -->
      <div class="creator-card__stats">
        <div class="creator-card__stat-item">
          <n-icon :size="14">
            <PeopleOutline />
          </n-icon>
          <span>{{ formatNumber(creator.followers) }}</span>
        </div>
        <div class="creator-card__stat-item">
          <n-icon :size="14">
            <VideocamOutline />
          </n-icon>
          <span>视频</span>
        </div>
        <div class="creator-card__stat-item">
          <n-icon :size="14">
            <RadioOutline />
          </n-icon>
          <span>直播</span>
        </div>
      </div>

      <!-- 游戏标签 -->
      <div v-if="creator.game_tags_array && creator.game_tags_array.length > 0" class="creator-card__tags">
        <n-tag
          v-for="tag in displayTags"
          :key="tag"
          size="small"
          type="info"
          class="creator-card__tag"
        >
          {{ tag }}
        </n-tag>
        <span v-if="creator.game_tags_array.length > maxTags" class="creator-card__more-tags">
          +{{ creator.game_tags_array.length - maxTags }}
        </span>
      </div>
    </div>

    <!-- 悬浮操作按钮 -->
    <div class="creator-card__actions">
      <n-button
        size="small"
        type="primary"
        ghost
        @click.stop="handleViewDetail"
      >
        查看详情
      </n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  StarOutline,
  FolderOutline,
  PeopleOutline,
  VideocamOutline,
  RadioOutline
} from '@vicons/ionicons5'
import type { CreatorDetail as CreatorDetailType } from '@/types/creators'
import { CREATOR_TYPES, CREATOR_STATUS } from '@/api/creators'

interface Props {
  creator: CreatorDetailType
  mobile?: boolean
}

interface Emits {
  (e: 'click', creatorId: number): void
  (e: 'view-detail', creatorId: number): void
}

const props = withDefaults(defineProps<Props>(), {
  mobile: false
})

const emit = defineEmits<Emits>()

// 最大显示标签数
const maxTags = computed(() => props.mobile ? 2 : 3)

// 显示的标签
const displayTags = computed(() => {
  if (!props.creator.game_tags_array) return []
  return props.creator.game_tags_array.slice(0, maxTags.value)
})

// 获取创作者类型文本
const getCreatorTypeText = (type: number) => {
  return CREATOR_TYPES[type as keyof typeof CREATOR_TYPES]?.label || '未知类型'
}

// 获取创作者类型标签类型
const getCreatorTypeTagType = (type: number) => {
  switch (type) {
    case 1: return 'error'
    case 2: return 'info'
    case 3: return 'success'
    default: return 'default'
  }
}

// 获取状态文本
const getStatusText = (status: number) => {
  return CREATOR_STATUS[status as keyof typeof CREATOR_STATUS]?.label || '未知状态'
}

// 获取状态样式类
const getStatusClass = (status: number) => {
  switch (status) {
    case 1: return 'active'
    case 2: return 'paused'
    case 3: return 'banned'
    default: return 'inactive'
  }
}

// 格式化数字
const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

// 处理点击
const handleClick = () => {
  emit('click', props.creator.id)
}

// 处理查看详情
const handleViewDetail = () => {
  emit('view-detail', props.creator.id)
}

// 处理头像加载成功
const handleAvatarLoad = () => {
  console.log('头像加载成功:', props.creator.avatar)
}

// 处理头像加载错误
const handleAvatarError = () => {
  console.error('头像加载失败:', props.creator.avatar)
  console.log('将显示默认头像，创作者信息:', props.creator)
}
</script>

<style scoped>
.creator-card {
  position: relative;
  background: var(--n-card-color);
  border: 1px solid var(--n-border-color);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.creator-card:hover {
  border-color: var(--n-color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.creator-card--mobile {
  padding: 16px;
}

.creator-card--recommended {
  border-color: var(--n-color-warning);
}

.creator-card--inactive {
  opacity: 0.7;
}

.creator-card__recommend-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--n-color-warning);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  z-index: 1;
}

.creator-card__avatar {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.creator-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.creator-card__avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--n-color-primary);
  color: white;
  font-weight: 600;
  border-radius: 50%;
}

.creator-card__status-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--n-card-color);
}

.creator-card__status-indicator--active {
  background: #67c23a;
}

.creator-card__status-indicator--paused {
  background: #e6a23c;
}

.creator-card__status-indicator--banned {
  background: #f56c6c;
}

.creator-card__status-indicator--inactive {
  background: #909399;
}

.creator-card__content {
  flex: 1;
}

.creator-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.creator-card__nickname {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--n-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.creator-card__category {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--n-text-color-2);
}

.creator-card__category-icon {
  color: var(--n-text-color-3);
}

.creator-card__description {
  font-size: 13px;
  color: var(--n-text-color-2);
  line-height: 1.4;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 36px;
}

.creator-card__stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.creator-card__stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--n-text-color-2);
}

.creator-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.creator-card__tag {
  font-size: 11px;
}

.creator-card__more-tags {
  font-size: 11px;
  color: var(--n-text-color-3);
  margin-left: 4px;
}

.creator-card__actions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.creator-card:hover .creator-card__actions {
  opacity: 1;
}

.creator-card:hover .creator-card__content {
  opacity: 0.3;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .creator-card__actions {
    position: static;
    transform: none;
    opacity: 1;
    margin-top: 12px;
  }

  .creator-card:hover .creator-card__content {
    opacity: 1;
  }

  .creator-card__nickname {
    font-size: 14px;
  }

  .creator-card__description {
    font-size: 12px;
    -webkit-line-clamp: 1;
    min-height: 18px;
  }
}
</style>
